<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="~{segmentation/_right_bottom_header::_header_common(~{::title},~{::link},~{::style})}">
    <meta charset="utf-8">
    <title>角色授权菜单</title>
    <link>
    <style type="text/css">
    </style>
</head>
<body>
<div class="layuimini-container layui-form" id="roleMenuList" value="0">
    <input id="roleId" name="roleId" type="hidden" th:value="${roleId}"/>
    <div id="menu-auth" class="layui-collapse" lay-filter="filter-collapse">
        <!--        <div class="layui-colla-item">-->
        <!--            <h2 class="layui-colla-title">任务1</h2>-->
        <!--            <div class="layui-colla-content layui-show">-->
        <!--                <p>这是任务1的详细描述</p>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="layui-colla-item">-->
        <!--            <h2 class="layui-colla-title" style="display: flex;">任务2-->
        <!--            </h2>-->
        <!--            <div class="layui-colla-content">-->
        <!--                <div class="layui-row ">-->
        <!--                    <div class="layui-col-md12">-->
        <!--                        <label class="layui-form-label">全部授权</label>-->
        <!--                        <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--                <div class="layui-colla-item">-->
        <!--                    <h2 class="layui-colla-title" style="display: flex;">任务3-->
        <!--                    </h2>-->
        <!--                    <div class="layui-colla-content">-->
        <!--                        <div class="layui-row ">-->
        <!--                            <div class="layui-col-md12">-->
        <!--                                <label class="layui-form-label">全部授权</label>-->
        <!--                                <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                        <div class="layui-row ">-->
        <!--                            <div class="layui-col-md3" style="justify-content: center;display: flex;">-->
        <!--                                列表授权-->
        <!--                            </div>-->
        <!--                            <div class="layui-col-md9">-->
        <!--                                按钮授权-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                        <div class="layui-row ">-->
        <!--                            <div class="layui-col-md3">-->
        <!--                                <label class="layui-form-label">菜单1</label>-->
        <!--                                <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">-->
        <!--                            </div>-->
        <!--                            <div class="layui-col-md9">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作1" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作2" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作3" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作4" checked="">-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                        <div class="layui-colla-item">-->
        <!--                            <h2 class="layui-colla-title" style="display: flex;">任务4-->
        <!--                            </h2>-->
        <!--                            <div class="layui-colla-content">-->
        <!--                                <div class="layui-row ">-->
        <!--                                    <div class="layui-col-md3">-->
        <!--                                        <label class="layui-form-label">菜单1</label>-->
        <!--                                        <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">-->
        <!--                                    </div>-->
        <!--                                    <div class="layui-col-md9">-->
        <!--                                        <input type="checkbox" name="" lay-skin="primary" title="写作1" checked="">-->
        <!--                                        <input type="checkbox" name="" lay-skin="primary" title="写作2" checked="">-->
        <!--                                        <input type="checkbox" name="" lay-skin="primary" title="写作3" checked="">-->
        <!--                                        <input type="checkbox" name="" lay-skin="primary" title="写作4" checked="">-->
        <!--                                    </div>-->
        <!--                                </div>-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                        <div class="layui-row ">-->
        <!--                            <div class="layui-col-md3">-->
        <!--                                <label class="layui-form-label">菜单1</label>-->
        <!--                                <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">-->
        <!--                            </div>-->
        <!--                            <div class="layui-col-md9">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作1" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作2" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作3" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作4" checked="">-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                        <div class="layui-row ">-->
        <!--                            <div class="layui-col-md3">-->
        <!--                                <label class="layui-form-label">菜单1</label>-->
        <!--                                <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">-->
        <!--                            </div>-->
        <!--                            <div class="layui-col-md9">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作1" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作2" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作3" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作4" checked="">-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                        <div class="layui-row ">-->
        <!--                            <div class="layui-col-md3">-->
        <!--                                <label class="layui-form-label">菜单1</label>-->
        <!--                                <input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">-->
        <!--                            </div>-->
        <!--                            <div class="layui-col-md9">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作1" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作2" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作3" checked="">-->
        <!--                                <input type="checkbox" name="" lay-skin="primary" title="写作4" checked="">-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

    </div>
    <div class="layuimini-main">
        <div class="layui-form-item">
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_ROLE_LIST_MANAGEMENT:save')"
                   class="layui-btn roleMenu-save" title="保存">
                    保存
                </a>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{segmentation/_tail::_tail_common}"></div>
<script th:inline="javascript">
    /*<![CDATA[*/
    [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_ROLE_LIST_MANAGEMENT:system_role_menu_view')"]
    layui.use(['common', 'tree', 'form', 'element'], function () {
        var $ = layui.jquery,
            element = layui.element,
            form = layui.form,
            rootMenuList = [[${map.rootMenuList}]],
            itemMenuList = [[${map.itemMenuList}]],
            buttonList = [[${map.buttonList}]],
            correlationIdList = [[${map.correlationIdList}]];

        // 初始化折叠面板
        element.init();
        // 监听折叠面板的切换事件
        element.on('collapse(menu-auth)', function (data) {
            // if (data.show) {
            //     // 当折叠面板展开时的逻辑
            //     console.log('面板展开');
            // } else {
            //     // 当折叠面板折叠时的逻辑
            //     console.log('面板折叠');
            // }
        });

        function matcId(id) {
            for (var i = 0; i < correlationIdList.length; i++) {
                if (correlationIdList[i] == id) {
                    return true;
                }
            }
            return false;
        }

        function buttonStr(oneId, twoId, id) {
            var button = "";
            for (var i = 0; i < buttonList.length; i++) {
                var item = buttonList[i];
                if (item.parentId == id) {
                    var isButton = matcId(item.id);
                    if (isButton) {
                        button += "<input type='checkbox' class='roleMenu all_" + oneId + " all_" + twoId + " itemMenu_" + id + "' menu='" + id + "' oneId='" + oneId + "' twoId='" + twoId + "' value='" + item.id + "' name='roleMenu' title='" + item.name + "' lay-skin='primary' checked lay-filter='button'>&nbsp;&nbsp;"
                    } else {
                        button += "<input type='checkbox' class='roleMenu all_" + oneId + " all_" + twoId + " itemMenu_" + id + "' menu='" + id + "' oneId='" + oneId + "' twoId='" + twoId + "' value='" + item.id + "' name='roleMenu' title='" + item.name + "' lay-skin='primary' lay-filter='button'>&nbsp;&nbsp;"
                    }
                }
            }
            return button;
        }

        function menuStr(oneId, twoId, threeId, name, level) {
            var isMenu = matcId(threeId);
            var menu = "";
            if (level < 2) {
                //&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch"></h2>
                menu =
                    "<div class='layui-colla-item'>"
                    + "<h2 class='layui-colla-title'>"
                    + name
                    + "</h2>"
                    // + "<div class='layui-colla-content layui-show'>" //打开
                    + "<div class='layui-colla-content'>"// 不打开
                    + "<div class = 'layui-row'>"
                    + "<div class = 'layui-col-md12'>"
                    + "<label class = 'layui-form-label'>全部授权</label>";
                if (isMenu) {
                    menu += "<input type='checkbox' id='all_" + threeId + "' class='roleMenu all_" + oneId + " all_" + twoId + " all_" + threeId + "' oneId='" + oneId + "' twoId='" + twoId + "' value='" + threeId + "' name='roleMenu' title='开启|关闭' lay-skin='switch' checked lay-filter='all'>"
                } else {
                    menu += "<input type='checkbox' id='all_" + threeId + "' class='roleMenu all_" + oneId + " all_" + twoId + " all_" + threeId + "' oneId='" + oneId + "' twoId='" + twoId + "' value='" + threeId + "' name='roleMenu' title='开启|关闭' lay-skin='switch' lay-filter='all'>"
                }
                var menuTwo = "";
                twoId = twoId != threeId ? threeId : twoId;
                for (var j = 0; j < itemMenuList.length; j++) {
                    var item = itemMenuList[j];
                    if (threeId == item.parentId) {
                        menuTwo += menuStr(oneId, twoId, item.id, item.name, item.level);
                    }
                }
                if (menuTwo != "" && level != 0) {
                    menu += "</div>"
                        + "</div>"
                        + "<div class='layui-row'>"
                        + "<div class='layui-col-md3' style='justify-content: center;display: flex;'>"
                        + "列表授权"
                        + "</div>"
                        + "<div class='layui-col-md9'>"
                        + "按钮授权"
                        + "</div>"
                        + "</div>"
                        + menuTwo;
                } else {
                    menu += "</div>"
                        + "</div>"
                        + menuTwo;
                }
                // + "<div class='layui-row'>"
                // + "<div class='layui-col-md3' style='justify-content: center;display: flex;'>列表授权</div>"
                // + "<div class='layui-col-md9'>按钮授权</div>"
                // + "</div>" + button
                menu += "</div>"
                    + "</div>";
                // for (var j = 0; j < itemMenuList.length; j++) {
                //     var item = itemMenuList[j];
                //     if (id == item.parentId && item.level > 2) {
                //         menu += menuStr(item.id, item.name, item.level);
                //     }
                // }

            } else {
                menu += "<div class='layui-row'>"
                    + "<div class='layui-col-md3'>"
                    + "<label class='layui-form-label'>"
                    + name
                    + "</label>";
                if (isMenu) {
                    menu += "<input type='checkbox' id='all_" + threeId + "' class='roleMenu all_" + oneId + " all_" + twoId + " all_" + threeId + "' value='" + threeId + "' oneId='" + oneId + "' twoId='" + twoId + "' name='roleMenu' title='开启|关闭' lay-skin='switch' checked lay-filter='menu'>"
                } else {
                    menu += "<input type='checkbox' id='all_" + threeId + "' class='roleMenu all_" + oneId + " all_" + twoId + " all_" + threeId + "' value='" + threeId + "' oneId='" + oneId + "' twoId='" + twoId + "' name='roleMenu' title='开启|关闭' lay-skin='switch' lay-filter='menu'>"
                }
                menu += "</div>"
                    + "<div class='layui-col-md9' style='margin-top: 8px;'>";
                menu += buttonStr(oneId, twoId, threeId);                // for (var j = 0; j < itemMenuList.length; j++) {
                //     var item = itemMenuList[j];
                //     if (id == item.parentId && item.level > 2) {
                //         menu += menuStr(item.id, item.name, item.level);
                //     }
                // }
                for (var j = 0; j < itemMenuList.length; j++) {
                    var item = itemMenuList[j];
                    if (threeId == item.parentId && item.level == 2) {
                        // twoId = twoId != item.id ? item.id : twoId;
                        menu += menuStr(oneId, twoId, item.id, item.name, item.level);
                    }
                }
                menu += "</div>"
                    + "</div>";
            }
            return menu;
        }

        function collapse() {
            // var button =
            //     "<div class='layui-row'>"
            //     + "<div class='layui-col-md3'>"
            //     + "<label class='layui-form-label'>"
            //     + "列表"
            //     + "</label>"
            //     + "<input type='checkbox' name='' title='开启|关闭' lay-skin='switch' checked='true'>"
            //     + "</div>"
            //     + "<div class='layui-col-md9' style='margin-top: 8px;'>"
            //     + "<input type='checkbox' name='' title='写作1' lay-skin='primary' checked=''>&nbsp;&nbsp;"
            //     + "<input type='checkbox' name='' title='写作1' lay-skin='primary' checked=''>&nbsp;&nbsp;"
            //     + "<input type='checkbox' name='' title='写作1' lay-skin='primary' checked=''>&nbsp;&nbsp;"
            //     + "</div>"
            //     + "</div>";
            //
            // var content =
            //     "<div class='layui-colla-item'>"
            //     + "<h2 class='layui-colla-title'>"
            //     + "任务1"
            //     + "</h2>"
            //     // + "<div class='layui-colla-content layui-show'>" //打开
            //     + "<div class='layui-colla-content'>"// 不打开
            //     + "<div class='layui-row'>"
            //     + "<div class='layui-col-md3' style='justify-content: center;display: flex;'>列表授权</div>"
            //     + "<div class='layui-col-md9'>按钮授权</div>"
            //     + "</div>" + button
            //     + "</div>";
            var menu = "";
            for (var i = 0; i < rootMenuList.length; i++) {
                var item = rootMenuList[i];
                menu += menuStr(item.id, 0, item.id, item.name, item.level);
            }

            $("#menu-auth").html(menu);
            form.render();
            element.render('collapse(menu-auth)');

            // checkbox 事件
            form.on('checkbox(button)', function (data) {
                var elem = data.elem; // 获得 checkbox 原始 DOM 对象
                var checked = elem.checked; // 获得 checkbox 选中状态
                // var value = elem.value; // 获得 checkbox 值
                // var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象
                if (checked) {
                    var menu = $(elem).attr("menu");
                    var oneid = $(elem).attr("oneId");
                    var twoid = $(elem).attr("twoId");
                    $("#all_" + menu).prop("checked", true);
                    $("#all_" + oneid).prop("checked", true);
                    $("#all_" + twoid).prop("checked", true);
                    form.render();
                    element.render('collapse(menu-auth)');
                }
            });
            // switch 事件
            form.on('switch(menu)', function (data) {
                var elem = data.elem; // 获得 checkbox 原始 DOM 对象
                var checked = elem.checked; // 获得 checkbox 选中状态
                // var value = elem.value; // 获得 checkbox 值
                // var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象
                var child = $(".itemMenu_" + elem.value);
                child.each(function (index, item) {
                    item.checked = checked;
                });
                if (checked) {
                    var oneid = $(elem).attr("oneId");
                    var twoid = $(elem).attr("twoId");
                    $("#all_" + oneid).prop("checked", true);
                    $("#all_" + twoid).prop("checked", true);
                }
                form.render();
                element.render('collapse(menu-auth)');
            });

            // switch 事件
            form.on('switch(all)', function (data) {
                var elem = data.elem; // 获得 checkbox 原始 DOM 对象
                var checked = elem.checked; // 获得 checkbox 选中状态
                // var value = elem.value; // 获得 checkbox 值
                // var othis = data.othis; // 获得 checkbox 元素被替换后的 jQuery 对象
                var child = $(".all_" + elem.value);
                child.each(function (index, item) {
                    item.checked = checked;
                });
                if (checked) {
                    var oneid = $(elem).attr("oneId");
                    var twoid = $(elem).attr("twoId");
                    $("#all_" + oneid).prop("checked", true);
                    $("#all_" + twoid).prop("checked", true);
                }
                form.render();
                element.render('collapse(menu-auth)');
            });
        }

        collapse();

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_ROLE_LIST_MANAGEMENT:save')"]
        // 批量保存操作
        $(document).off("click", ".roleMenu-save");
        $(document).on("click", ".roleMenu-save", function () {
            layer.confirm('确认保存吗？', {
                icon: 3,
                title: '提示',
                shadeClose: true
            }, function (index) {
                var roleId = $("#roleId").val();
                var menuIdList = [];
                $('input[type=checkbox]:checked').each(function () {
                    menuIdList.push($(this).val());
                });
                layer.close(index);
                $.ajax({
                    type: 'POST',
                    url: '/system/role/menu/save',
                    data: {
                        roleId: roleId,
                        menuIdList: menuIdList
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == Result.SUCCESS) {
                            layer.msg('成功!', {
                                icon: 1,
                                shade: [0.3, '#f5f5f5'],
                                time: 1500
                            }, function () {
                                // $("#roleList", window.parent.document).attr('value', 1);
                                // var index = parent.layer.getFrameIndex(window.name);
                                // parent.layer.close(index);
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(data.msg, {
                                icon: 2,
                                time: 3000
                            });
                        }
                    },
                    error: function (data) {
                        console.log(data.msg);
                    }
                });
            });
            return;
        });
        [/]
    });
    [/]
    /*]]>*/
</script>
</body>
</html>